<template>
	<view class="container" :style="[containHeight]">
		<view class="logo-area layout-column-center">
			<view class="layout-around head-nav">
				<view :class="isNoChallenge==0?'active':''" @click="getChoice(0)">普通考试</view>
				<view :class="isNoChallenge==1?'active':''" @click="getChoice(1)">挑战答题</view>
			</view>
		</view>
		<view class="examination" v-for="(item,index) in choiceList" :key="index" v-if="choiceList.length != 0">
			<view class="exam-item titleTxt">{{item.name}}</view>
			<view class="exam-item">开始时间：{{item.start_time}}</view>
			<view class="exam-item">结束时间：{{item.end_time}}</view>
			<view class="exam-item">答题时长：{{item.duration}}分钟</view>
			<view class="exam-item">考试总分：100</view>
			<view class="exam-item">及格线：{{item.pass_score}}</view>
			<view class="exam-item">单选题：共{{item.single_choice_num}}题，每题{{item.single_choice_score}}分</view>
			<view class="exam-item">多选题：共{{item.multi_choice_num}}题，每题{{item.multi_choice_score}}分</view>
			<view class="exam-item">判断题：共{{item.judge_choice_num}}题，每题{{item.judge_choice_score}}分</view>
			<view class="layout-end enterTheExam">
				<u-button text="进入考试" color="linear-gradient(to right, #7774ff, #017ffd,#01b1fd)"
					@click="enterExam(item.id,item.duration)"></u-button>
			</view>
		</view>
		<!-- <view class="customization">
			<u-button text="定制测试" color="linear-gradient(to right, #7774ff, #017ffd,#01b1fd)"
				@click="toCustomization"></u-button>
		</view> -->
		<view v-if="choiceList.length==0">
			<u-empty mode="list" icon="../../static/listEmpty.png"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		myExam
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				fullHeight: true,
				userId: null,
				choiceList: [],
				isNoChallenge: 0, //0正常考试，1是挑战答题
			}
		},
		computed: {
			containHeight() {
				return {
					/*#ifdef MP-WEIXIN*/
					// 微信小程序特有代码
					height: this.fullHeight ? '100vh' : 'auto',
					/*#endif*/
					/*#ifndef MP-WEIXIN*/
					height: this.fullHeight ? 'calc(100vh - 44px )' : 'auto',
					/*#endif*/
					transition: 'all 1s ease'
				}
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userinfo').id
			this.getChoice(0)
		},
		onReachBottom() {
			if (this.fullHeight) {
				this.fullHeight = false
				console.log("onReachbottom");
			}
		},
		// onShow() {
		// 	this.fullHeight = true
		// },
		methods: {
			enterExam(id, duration) {
				uni.showModal({
					title: '提示',
					content: '您确定要参加测试吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: `/pages/onlineTesting/onlineTesting?id=${id}&duration=${duration}`
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toCustomization() {
				uni.showModal({
					title: '提示',
					content: '您确定要参加测试吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: "/pages/onlineTesting/onlineTesting"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getChoice(chall) {
				this.isNoChallenge = chall
				this.fullHeight = true
				myExam({
					userId: this.userId,
					noChallenge: this.isNoChallenge, //0正常考试，1是挑战答题
				}).then(s => {
					if (s.code === 20000) {
						// console.log("S",s);
						this.choiceList = s.data
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// background: url("../../static/bg.png");
		// background-size: cover;
		// background:linear-gradient(#F7FDF9 5%,#BFE8FA 20%,#CDEEFF 100%);
		background: linear-gradient(#BDD7FE 15%, #F6FAFF 100%);
		padding: 20rpx 40rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;

		.examination {
			margin-top: 30rpx;
			padding: 15rpx 25rpx;
			box-sizing: border-box;
			// background: #fff;
			// background:linear-gradient(to right,#DDFCF6,#D9FBFD);
			background: linear-gradient(#E0F7FD, #F2FCFD, #F5FBFB);
			border-radius: 30rpx;
			// opacity: 0.7;
			box-shadow: 5rpx 0rpx 6rpx 5rpx #fff;

			// border: 3px solid #fff;
			.exam-item {
				padding: 10rpx 0rpx;
				box-sizing: border-box;
			}

			.enterTheExam {
				padding: 10rpx;
				box-sizing: border-box;
				color: #02A7F0;
			}
		}

		.customization {
			position: fixed;
			bottom: 300rpx;
			right: 20rpx;
		}

	}

	.logo-area {
		width: 100%;
		position: relative;
		background: linear-gradient(to right, #F7FDF9, #F2FCFD, #F7F5FF);
		height: 110rpx;
		border-radius: 12rpx;
		box-sizing: border-box;

		.head-nav {
			// margin-top: 20rpx;
			width: 80%;
			font-size: 36rpx;
			font-family: PingFang SC;
			color: #999999; //#999999 #ffffff

			.active {
				color: #01b1fd; //
				position: relative;
				font-weight: bold;
			}

			.active::after {
				content: "";
				position: absolute;
				left: 20rpx;
				bottom: -18rpx;
				width: 100%;
				background: linear-gradient(to right, #7774ff, #017ffd, #01b1fd); //#1C4BB6
				width: 100rpx;
				height: 6rpx;
				border-radius: 3px;
			}
		}

	}

	.titleTxt {
		font-weight: bold;
		font-size: 32rpx;
	}
</style>